<template>
    <el-container>
        <el-header height="72px" style="border-bottom: 1px solid #f5f5f5;">
            <div class="pg-header">
                <div class="logo">
                    <img src="./assets/logo.png">
                </div>

                <div v-if="name" @click="doLogout" class="top-menu">{{ name }}</div>
                <div v-else class="top-menu">
                    <router-link :to="{name:'Login'}">
                        <el-button>登录</el-button>
                    </router-link>
                    <router-link :to="{name:'Register'}">
                        <el-button>注册</el-button>
                    </router-link>
                </div>
            </div>
        </el-header>
        <router-view/>
    </el-container>
</template>

<script setup>
import {computed} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'

const router = useRouter();
const store = useStore();

// const name = ref(store.state.name);
const name = computed(() => store.state.name);

function doLogout() {
    //localStorage清空 + state值清空 + 跳转登录
    store.commit("logout");
    router.push({name: "Login"});
}


</script>

<style>
body {
    margin: 0;
}

img {
    height: 100%;
}

.pg-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    height: 72px;
}

.pg-header .logo {
    height: 48px;
}

.pg-header .top-menu a {
    padding: 0 5px;
    text-decoration: none;
}
</style>
